import React, { Component } from 'react'
import { ART, View,ScrollView, Text, StyleSheet,Image, TouchableOpacity } from 'react-native'
import ScrollableTabView, {DefaultTabBar,} from 'react-native-scrollable-tab-view'
import { connect } from 'react-redux'
import Spinner from 'react-native-loading-spinner-overlay'
import { BackIcon } from '../../../../widgets'
import TimeChooser from '../../components/TimeChooser'
import { createAction, NavigationActions } from '../../../../utils'
import SingleCell from '../../../home/detail/ratioAnalysis/widgets/SingleCell'
import color from '../../../../utils/color'
import screen from "../../../../utils/screen";

@connect(({rateanalyze, loading }) => ({ ...rateanalyze, isLoading: loading.models.rateanalyze}))
export default class extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: '杜邦分析',
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
    headerLeft: ( <BackIcon backInvoke={() => { navigation.goBack(null) }}/>),
  })
  constructor(props) {
    super(props)
    const params = this.props.navigation.state.params || {}
    const initTime = params['initTime'] || {
      startTime: "2018.01",
      endTime: "2019.01",
      timeType: 'year'
    }
    this.state = {
      timeD: initTime
    }
  }

  componentDidMount() {
  }

  fetchD = () => {
    const { timeD } = this.state
    this.props.dispatch(createAction("rateanalyze/getDuBangData")({
      startTime: timeD.startTime,
      endTime: timeD.endTime
    }))
  }

  changeDate = (type, sTime, eTime) => {
    this.setState({
      timeD: {
        startTime: sTime,
        endTime: eTime,
        timeType: type
      }
    }, () => {
      this.fetchD()
    })
  }

  getDbKey(key, type) {
    const { duBangData } = this.props;
    const duBangD = duBangData || {}
    // console.log('duBangD is ', duBangD)
    let topD = ""
    if("tb" == type) {
      topD = (duBangD["tb" + key] || "0.0") + "%"
    } else if("tbb" == type) {
      topD = (duBangD["tb" + key] || "")
    } else if("hbb" == type) {
      topD = (duBangD["hb" + key] || "")
    } else {
      topD = (duBangD["hb" + key] || "0.0") + "%"
    }
    if("DB_SJLR" == key) {
      console.log("topD: ", topD, " bottom: ", duBangD[key])
    }
    return {
      top: topD,
      bottom: (duBangD[key] || "")
    }
    // return (duBangD[key] || "0.0") + '%'
  }

  render() {
    const { isLoading } = this.props;
    return (
      <View style={styles.container}>
        <Spinner visible={isLoading} />
        <TimeChooser changeDate={this.changeDate} initTime={this.state.timeD}/>
        <ScrollableTabView
          tabBarBackgroundColor={color.theme}
          tabBarActiveTextColor="#00195e"
          tabBarInactiveTextColor="#268db8"
          tabBarTextStyle={{
            fontSize: screen.pxToDp(30),
            fontWeight: 'normal',
          }}
          renderTabBar={() => <DefaultTabBar />}
        >
          <View tabLabel="同比" style={{flex: 1}}>
            <ScrollView>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_QYJLL", "tb")} center bottomCenter centerTopText="权益净利率" centerTopColor="#e84a4b"/>
                <View style={{width: screen.pxToDp(220)}}/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_ZZCJLR", "tb")} center topCenter topRight bottomCenter centerTopText="总资产净利率" centerTopColor="#fbb03b"/>
                <SingleCell innerVal={this.getDbKey("DB_QYCS", "tbb")} center topCenter topLeft centerTopText="权益乘数" centerTopColor="#fbb03b"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_XSJLR", "tb")} center topCenter topRight bottomCenter centerTopText="销售净利率" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_ZZCS", "tbb")} center topCenter topLeft bottomCenter bottomLeft centerTopText="资金周转次数" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_AYYSR", "tb")} center topCenter topRight bottomCenter centerTopText="收入" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_SJLR", "tb")} center topCenter topLeft centerTopText="净利润" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_AYYSR")} center leftTop leftCenter leftBottom centerTopText="收入" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_CBFY", "tb")} center topCenter rightCenter rightBottom centerTopText="成本费用" centerTopColor="#00aaee"/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_ZC", "tb")} center leftTop leftCenter leftTwoBottom centerTopText="资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_SDS", "tb")} center rightCenter rightTop rightBottom centerTopText="所得税" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_YYWZCS", "tb")} center leftCenter centerTopText="营业外收支" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_AM", "tb")} center leftTop leftCenter leftBottom centerTopText="长期资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_YYCB", "tb")} center rightCenter centerTopText="营业成本" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_QTSY", "tb")} center leftCenter leftTop leftBottom centerTopText="其他损益" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_T", "tb")} center leftTop leftCenter leftTwoBottom centerTopText="流动资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_SSJQJFY", "tb")} center leftCenter leftTop centerTopText="税费及期间费用" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_A", "tb")} center leftCenter leftTop leftBottom centerTopText="现金" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_P", "tb")} center leftCenter leftTop leftBottom centerTopText="存货" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_G", "tb")} center leftCenter leftTop leftBottom centerTopText="应收账款" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_N", "tb")} center leftCenter leftTop centerTopText="其他" centerTopColor="#a5cabf"/>
              </View>
            </ScrollView>
          </View>
          <View tabLabel="环比" style={{flex: 1}}>
            <ScrollView>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_QYJLL")} center bottomCenter centerTopText="权益净利率" centerTopColor="#e84a4b"/>
                <View style={{width: screen.pxToDp(220)}}/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_ZZCJLR")} center topCenter topRight bottomCenter centerTopText="总资产净利率" centerTopColor="#fbb03b"/>
                <SingleCell innerVal={this.getDbKey("DB_QYCS", "hbb")} center topCenter topLeft centerTopText="权益乘数" centerTopColor="#fbb03b"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_XSJLR")} center topCenter topRight bottomCenter centerTopText="销售净利率" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_ZZCS", "hbb")} center topCenter topLeft bottomCenter bottomLeft centerTopText="资金周转次数" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_AYYSR")} center topCenter topRight bottomCenter centerTopText="收入" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_SJLR")} center topCenter topLeft centerTopText="净利润" centerTopColor="#00aaee"/>
                <SingleCell innerVal={this.getDbKey("DB_AYYSR")} center leftTop leftCenter leftBottom centerTopText="收入" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_CBFY")} center topCenter rightCenter rightBottom centerTopText="成本费用" centerTopColor="#00aaee"/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_ZC")} center leftTop leftCenter leftTwoBottom centerTopText="资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_SDS")} center rightCenter rightTop rightBottom centerTopText="所得税" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_YYWZCS")} center leftCenter centerTopText="营业外收支" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_AM")} center leftTop leftCenter leftBottom centerTopText="长期资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <SingleCell innerVal={this.getDbKey("DB_YYCB")} center rightCenter centerTopText="营业成本" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_QTSY")} center leftCenter leftTop leftBottom centerTopText="其他损益" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_T")} center leftTop leftCenter leftTwoBottom centerTopText="流动资产" centerTopColor="#3fc59d"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_SSJQJFY")} center leftCenter leftTop centerTopText="税费及期间费用" centerTopColor="#d7edfa"/>
                <SingleCell innerVal={this.getDbKey("DB_A")} center leftCenter leftTop leftBottom centerTopText="现金" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_P")} center leftCenter leftTop leftBottom centerTopText="存货" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_G")} center leftCenter leftTop leftBottom centerTopText="应收账款" centerTopColor="#a5cabf"/>
              </View>
              <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <View style={{width: screen.pxToDp(220)}}/>
                <View style={{width: screen.pxToDp(220)}}/>
                <SingleCell innerVal={this.getDbKey("DB_N")} center leftCenter leftTop centerTopText="其他" centerTopColor="#a5cabf"/>
              </View>
            </ScrollView>
          </View>
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  unit: {
    flex: 1,
    height: 50,
    backgroundColor: 'red',
  },
})

// 权益净利率：DB_QYJLL
// 总资产净利率：DB_SYZQY
// 权益乘数: DB_QYCS
// 销售净利率：DB_ZJLR
// 资金周转率：DB_ZZCS
// 销售收入：
// 销售净利润：DB_SJLR
// 成本费用：DB_CBFY
// 流动资产：DB_T
// 营业外收支：
// 营业成本：DB_CBFY
// 税费：DB_SSJQJFY
// 其他损益：
// 收入：
// 总资产： DB_SYZQY
// 长期资产：DB_AM
// 流动资产：DB_T
// 现金：DB_A
// 存货： DB_P
// 应收账款： DB_G
// 其他：DB_N

// 无
// 总资产净利率 DB_ZZCJLR
// 销售收入  DB_XSSR
// 资金周转收入  DB_ZJZCSR
// 营业外收支  DB_YYWSZ
// 营业成本  DB_YYCB
// 其他损益  DB_QTSY
// 税费及期间费用  DB_SFJQJFY
